<template>
	<view>
		<!-- 返回 -->
		<view class="backs">
			<view @click="backlast()">
				<image src="../../static/back1.png"></image>
			</view>
		</view>
		<view class="container">
			<!-- 背景色区域 -->
			<view class="titleNview-background"  :style="'background: url('+url()+'/wximg/bjTop1.png'+'); background-size: 100%;'"  >
				<!-- 配送车辆-->
				<view class="text-box">
					<text>商户名称：{{name}}</text>
				</view>
			</view>
			<!-- 待配送商户已配送商户区域 -->
			<view class="model">
				<view class="dataRap">
					<view class="onlyOne">
						<view class="modelrt">
							<text>包裹</text>
							<text class="psnums"><text class="psnum">{{packageNumber}}</text>个</text>
						</view>
					</view>
					<text class="modeline"></text>
					<view class="onlyOne">
						<view class="modelrt">
							<text>香烟</text>
							<text class="psnums"><text class="psnum">{{cigaretteNumber}}</text>条</text>
						</view>
					</view>
					<text class="modeline"></text>
					<view class="onlyOne">
						<view class="modelrt">
							<text>已验签</text>
							<text class="psnums"><text class="psnum">{{VerifiedNubmer}}</text>条</text>
						</view>
					</view>
				</view>
				<view class="dataRap">
					<view class="onlyOne">
						<view class="modelrt">
							<text>异常</text>
							<text class="psnums"><text class="psnum" style="color: #ef0000;">{{abnormalNumber}}</text>条</text>
						</view>
					</view>
					<text class="modeline"></text>
					<view class="onlyOne">
						<view class="modelrt">
							<text>已送达</text>
							<text class="psnums"><text class="psnum" style="color: #4e4eff;">{{DeliveredNumber}}</text>条</text>
						</view>
					</view>
					<text class="modeline"></text>
					<view class="onlyOne">
						<view class="modelrt">
							<text>未送达</text>
							<text class="psnums"><text class="psnum" style="color: #ef0000;">{{NonDeliveryNumber}}</text>条</text>
						</view>
					</view>
				</view>
				<view>
					<button @click="addshopinfo" class="pesBtn" hover-class='pesBtn-hover' type="primary" :style="'padding: 0 '+showType?'30':'60' +'upx;'"  >{{showType?"已评价":"未评价"}}</button>
				</view>
				
			</view>
             
			<view class="wrapper" :style="{minHeight: heightContent+'px'}">
				<view  v-for="(item,i) in contents"   class="tableBox">
					<view class="tabletitle">配送详情</view>
					<view class="table">
						<view class="bgName"> 
							<text>包裹{{i+1}}</text>
							<text>包裹编码：<text>{{item.packageCode}}</text></text>
						</view>	
						<wyb-table 
						:key="key"
						show-vert-border="false" 
						header-bg-color="#fff" 
						first-col-bg-color="#fff" 
						content-bg-color="#fff"
						height='322px'
						content-ft-color="#333333"  
						header-weight="true" 
						border-color="#ffffff"
						ref="table" 
						:headers="headers" 
						:contents="item.deliveryPackageRowList" 
						width="100%"
						:show-vert-border="vertborder"
						:loading="loading"
						:url-col="urlCol"
						@onCheck="onCheck"
						@onCellClick="onCellClick"
						@onButtonClick="onButtonClick"
						  />			
					</view>
					<!-- <view    class="tableBox">
						<view class="tabletitle">配送单号</view>
						<view class="table">
							<view class="bgName"> 
								<text>包裹1</text>
								<text>包裹编码：<text>{{packageCode}}</text></text>
							</view>	
							<wyb-table 
							:key="key"
							show-vert-border="false" 
							header-bg-color="#fff" 
							first-col-bg-color="#fff" 
							content-bg-color="#fff"
							height='182px'
							content-ft-color="#333333"  
							header-weight="true" 
							border-color="#ffffff"
							ref="table" 
							:headers="headers2" 
							:contents="contents2" 
							width="100%"
							:show-vert-border="vertborder"
							:loading="loading"
							:url-col="urlCol"
							@onCheck="onCheck"
							@onCellClick="onCellClick"
							@onButtonClick="onButtonClick"
							  />			
						</view>
					</view> -->
				</view>
			</view>
			<!-- 查看异常图片 -->
			<popupConfirm ref="tableConfirm">
				<view class="popup-info">
					<view type="default" @click="close" class="close">
						<image :src="url()+'/wximg/close.png'"></image>
					</view>
					<view class="popuptitle">异常图片</view>
					<form class="form">
						<view class="uni-list-cell" style="line-height: 90rpx;">
							<view class="uni-list-cell-left">状态</view>
							<view class="uni-list-cell-db">
								<text>异常</text>
							</view>
						</view>
						<view class="uni-list-cell" style="line-height: 90rpx;">
							<view class="uni-list-cell-left">异常内容</view>
							<view class="uni-list-cell-db">
								<text>{{errerTypeText.exceptionCode}}</text>
							</view>
						</view>
					    <view  v-if="errerTypeText.exceptionDescShow" class="uni-list-cell" style="line-height: 90rpx;">
					    	<text style=" padding: 0 30rpx;">{{errerTypeText.exceptionDesc}}</text>
					    </view>
					
						
						<view class="imgWra">
							<image class="up-check" mode="widthFix" :src="imgurl"></image>
						</view>
						
						</form>
					
					<!-- <view class="btnPat">
						<button type="default" class="btn" @click="addshopinfo">添加门店</button>
					</view> -->
				</view>
			</popupConfirm>
			
		<!-- 	<popupfour ref="xmConfirm">
				<view class="popup-info">
					<navigator type="default" @click="close" class="close">
						<image src="../../static/font/temp/close.png"></image>
					</navigator>
					<view class="popuptitle">配送满意度评价</view>
					
					<form class="form">
						<view class="rateBox">
							<view class="uni-list-cell-left"><text style="letter-spacing:0.35em;">配送员：</text></view>
							<rate   value="3"   @change="distributorRateChange"></rate>
						</view>
						<view class="rateBox">
							<view class="uni-list-cell-left"><text style="letter-spacing:0.1em;">中国烟草：</text></view>
							<rate  :value="tobaccorate"  @change="tobaccoRateChange"></rate>
						</view>
					</form>
					<view class="btnPat">
						<button type="default" class="btn" @click="star">确认提交</button>
					</view>
				</view>
			</popupfour> -->
			
			<popupfour ref="xmConfirm">
							<view class="popup-info">
								<view type="default" @click="close" class="close">
									<image :src="url()+'/wximg/close.png'"></image>
								</view >
								<view class="popuptitle">配送满意度评价</view>
								
								<form class="form">
									
									<view class="rateBox"  >
										<view class="uni-list-cell-left"><text style="letter-spacing:0.35em;">配送员：</text></view>
										<my-issue  :score="distributorrate"   :starsDisabled="showType"  @submit="distributorRateChange"    />
									</view> 	
									<view class="rateBox" >
										<view class="uni-list-cell-left"><text style="letter-spacing:0.1em;">中国烟草：</text></view>
										<my-issue  :score="tobaccorate"  :starsDisabled="showType"   @submit="tobaccoRateChange"    />
									</view>
									<input v-if="showType==false"   type="text"   auto-height v-model="evaluateDesc"  :disabled="showType"  focus="true" maxlength="-1" style=" height:50upx; padding: 0 30rpx; " placeholder-style="color:#888;font-size:14px" placeholder="请留下您的宝贵意见!"/>
									<view v-if="showType"    style="padding: 0 30rpx;">{{evaluateDesc}}</view>
									<!-- <textarea class="review"  auto-height v-model="evaluateDesc"  :disabled="showType"  focus="true" maxlength="-1" placeholder-style="color:#888; font-size:14px" placeholder="请留下您的宝贵意见!"/> -->
								</form>
								<view   v-if="showType==false" class="btnPat">
									<button type="default" class="btn" @click="star">确认提交</button>
								</view>
							</view>
						</popupfour>
			
			
		</view>
	</view>
</template>

<script>
	// 表格
	import rate from '@/components/rate.vue'
	import wybTable from '@/components/wyb-table/wyb-table.vue'
	import service from '../../service.js';
	import myIssue from '@/components/myIssue.vue'
	import {SelectDeliveryPackageList,EditDeliveryTaskDetail,dictionaryList} from '@/api/request.js';
	import url from '@/api/url.js';
	let user=service.getUsers().user;
	export default {
		name: 'evaluate',
		components: {
			// 表格
			wybTable,
			  rate,
			  myIssue
		},
		data() {
			const theUrl = '/pages/demos/noticeBar-demo/more' // 本地的某个页面
			const httpUrl = 'https://ext.dcloud.net.cn/plugin?id=2667' // 某个网址
			return {
				url:url,
				tobaccorate:0,//评分
				distributorrate:0,//评分
				showType:false,
				//获取高度
				heightContent:'',
				evaluateDesc:'',
				errerTypeText:{exceptionCode:"",exceptionDescShow:false,exceptionDesc:""},
				dictionaryList:[],
				packageNumber:0,//包裹个数
				cigaretteNumber:0,//香烟个数
				VerifiedNubmer:0,//验签个数
				abnormalNumber:0,//异常个数
				DeliveredNumber:0,//已送达
				NonDeliveryNumber:0,//未送达
				taskDetail:'',//上级信息
				imgurl:url()+'/wximg/confirm.jpg',
				// 配送车牌号码
				name: '',
				//表格
				key: 0,
				headers2:[],
				contents2:[],
				loading:true,
				vertborder:false, //金融竖向条,但是不能去除头部
				// 表格数据
				headers: [{
					label: '品名',
					key: 'commodityName',
					width:210
				}, {
					label: '总数',
					key: 'numtext',
					width:130
				}, {
					label: '状态',
					key: 'commodityStatusName',
					width:150
				}, {
					label: '操作',
					key: 'look',
					width:150
				}],
				contents: [],
				urlCol: [
				{
					type: 'button',
					key: 'look'
				},
				]
				
			};
		},
		onLoad(options) {
			//表格加载动画
			user=service.getUsers().user;
			
			this.taskDetail= JSON.parse(decodeURIComponent(options.data));//上级信息
		
			this.name=this.taskDetail.lineData.shopName;
			this.tobaccorate=parseInt(this.taskDetail.lineData.evaluateCompany) //设置公司
		    this.distributorrate=parseInt(this.taskDetail.lineData.evaluateUser)//设置公司
	
			if(this.taskDetail.lineData.evaluateUser!=null&&this.taskDetail.lineData.evaluateCompany!=null){
				if(this.tobaccorate==0&&this.distributorrate==0){
						this.showType=false;
				}else{
						this.showType=true;
				}
			}else{
					this.showType=false;
			}
			
			if(this.taskDetail.lineData.evaluateDesc!=""&&this.taskDetail.lineData.evaluateDesc!=undefined){
				this.evaluateDesc=this.taskDetail.lineData.evaluateDesc
			}
			
			this.init();
			this.inItDictionary();
		},
		onReady(){
			let _that = this
			uni.getSystemInfo({
				success: (res) => { // 需要使用箭头函数，swiper 高度才能设置成功
				// res - 各种参数
		　　    let info = uni.createSelectorQuery().select(".wrapper");// 获取某个元素
		　　　  info.boundingClientRect(function(data) { //data - 各种参数
					 let view  = res.windowHeight - data.top
					 _that.heightContent = view
	　　        }).exec()
				}
			});		
		},
		methods: {
			tobaccoRateChange(res){
				this.tobaccorate=res
			},
			distributorRateChange(res){
				this.distributorrate=res
			},
			backlast(){
				uni.navigateBack({
					delta: 1
				});
			},
			inItDictionary(){

				let  param ={
					d_type:"errerType"
				}
				let _this=this;  
			dictionaryList(param).then(res => {
				if (res.code == 200) {
				res.map.data.forEach(function(item){
					_this.dictionaryList.push(item);
				})

				} else{
					uni.showModal({
						title: '警告',
						content: 'code不符 请联系管理员',
						showCancel: false
					})
				}
			}).catch(err => {
				uni.showModal({
					title: '警告',
					content: '失败',
					showCancel: false
				})
			})
			},
			
			// 评价提交成功
			star(){
				
				if(this.distributorrate==0){
					uni.showToast({
					    title: '配送员评价不能为空',
						icon: 'none',
					});
					return;
				}else if(this.tobaccorate ==0){
					
					uni.showToast({
					    title: '对企业评价不能为空',
						icon: 'none',
					});
						return;
				}else if(this.evaluateDesc==""){
					uni.showToast({
					    title: '评价内容不能为空',
						icon: 'none',
					});
						return;
				}
				
				let  param={
					id:this.taskDetail.lineData.id,
					evaluateUser:this.distributorrate,
					evaluateCompany:this.tobaccorate,
					evaluateDesc:this.evaluateDesc,
				};
				EditDeliveryTaskDetail(param).then(res => {
					if (res.code == 200) {
					this.showType=true;
					} else{
						uni.showModal({
							title: '警告',
							content: 'code不符 请联系管理员',
							showCancel: false
						})
					}
				}).catch(err => {
					uni.showModal({
						title: '警告',
						content: '失败',
						showCancel: false
					})
				})
				
				
				uni.showToast({
				    title: '提交成功',
				    duration: 2000
				});
				let xmConfirm = this.$refs.xmConfirm
				xmConfirm.onTap()
				
			},
			//表格
			onCellClick(e) {
			},
			onCheck(e) {
			},
			// 关闭弹窗
			close(){
				let tableConfirm = this.$refs.tableConfirm
				tableConfirm.onTap()
				let xmConfirm = this.$refs.xmConfirm
				xmConfirm.onTap()
			},
			// 打开查看图片弹窗
			onButtonClick(e) {
			if(e.lineData.qePrictureUrl!=""&&e.lineData.qePrictureUrl!=undefined){
				this.imgurl=e.lineData.qePrictureUrl
			}else{
				this.imgurl=url()+'/wximg/confirm.jpg';
			}
	
			for(let i=0;this.dictionaryList.length>i;i++){
				if(this.dictionaryList[i].id==e.lineData.exceptionCode){
					this.errerTypeText.exceptionCode=this.dictionaryList[i].d_name
	
					if(this.dictionaryList[i].d_name=="其它"){
						this.errerTypeText.exceptionDesc=e.lineData.exceptionDesc;
						this.errerTypeText.exceptionDescShow=true;
						break;
					}else{
						this.errerTypeText.exceptionDescShow=false;
					}
					
				}
				
			}
			
			
			   let tableConfirm = this.$refs.tableConfirm
			   tableConfirm.open()

			},
	        // 打开评价弹窗
	        addshopinfo(){
				if(this.showType==false){
					return ;
				}
	        	let xmConfirm = this.$refs.xmConfirm
	        	xmConfirm.open()
	        },
			wait(time) {
				return new Promise(resolve => {
					setTimeout(() => {
						resolve()
					}, time)
				})
			},
			init(){//初始化列表
				let  param={
					detailId:this.taskDetail.lineData.id,
					shopId:this.taskDetail.lineData.shopId
				};
				let _this=this;
				SelectDeliveryPackageList(param).then(res => {
					if (res.code == 200) {
					this.packageNumber=res.map.data.length;//渲染包裹个数
					res.map.data.forEach(function (item){
						item.deliveryPackageRowList.forEach(function(items){
							if(parseInt(items.commodityType)==1){//判断类型
								items.numtext=items.num+"条"
								_this.cigaretteNumber=_this.cigaretteNumber+parseInt(items.num)
							}else{
								items.numtext=items.num+"箱"
								_this.cigaretteNumber=_this.cigaretteNumber+(parseInt(items.num)*10)
							}
							if(parseInt(items.commodityStatus)==3){
								if(parseInt(items.commodityType)==1){//判断类型
									_this.abnormalNumber=_this.abnormalNumber+parseInt(items.num)
								}else{
									_this.abnormalNumber=_this.abnormalNumber+(parseInt(items.num)*10)
								}
								
								items.listState=true;
								items.listColor=[{"element":0,"color":"#ef0000"},{"element":1,"color":"#ef0000"},{"element":2,"color":"#ef0000"},{"element":3,"color":"#ef0000"}]
							    items.commodityStatusName="异常"
								items.look='查看';
							}else if(parseInt(items.commodityStatus)==2){
								if(parseInt(items.commodityType)==1){//判断类型
									_this.VerifiedNubmer=_this.VerifiedNubmer+parseInt(items.num)
								}else{
									_this.VerifiedNubmer=_this.VerifiedNubmer+(parseInt(items.num)*10)
								}
								items.commodityStatusName="验签"
							}else if(parseInt(items.commodityStatus)==1){
							/* 	if(parseInt(items.commodityType)==1){//判断类型
									_this.VerifiedNubmer=_this.VerifiedNubmer+parseInt(items.num)
								}else{
									_this.VerifiedNubmer=_this.VerifiedNubmer+(parseInt(items.num)*10)
								} */
								items.commodityStatusName="待验"
							}else if(parseInt(items.commodityStatus)==4){
								if(parseInt(items.commodityType)==1){//判断类型
									_this.NonDeliveryNumber=_this.NonDeliveryNumber+parseInt(items.num)
								}else{
									_this.NonDeliveryNumber=_this.NonDeliveryNumber+(parseInt(items.num)*10)
								}
								items.listState=true;
								items.listColor=[{"element":0,"color":"#ef0000"},{"element":1,"color":"#ef0000"},{"element":2,"color":"#ef0000"},{"element":3,"color":"#ef0000"}]
								items.commodityStatusName="未送达"
							}else if(parseInt(items.commodityStatus)==5){
								if(parseInt(items.commodityType)==1){//判断类型
									_this.DeliveredNumber=_this.DeliveredNumber+parseInt(items.num)
								}else{
									_this.DeliveredNumber=_this.DeliveredNumber+(parseInt(items.num)*10)
								}
								items.listState=true;
								items.listColor=[{"element":0,"color":"#4e4eff"},{"element":1,"color":"#4e4eff"},{"element":2,"color":"#4e4eff"},{"element":3,"color":"#4e4eff"}]
								items.commodityStatusName="已送达"
							}
							
							
						})
						_this.contents.push(item);
					});

					this.headers2 = this.headers.slice()
					this.contents2 = this.contents.slice()
					this.loading = false
					
					} else{
						uni.showModal({
							title: '警告',
							content: 'code不符 请联系管理员',
							showCancel: false
						})
					}
				}).catch(err => {
					uni.showModal({
						title: '警告',
						content: '失败',
						showCancel: false
					})
				})
				
				
			},
		}

	}
</script>

<style scoped>
	.backs {
		position: absolute;
		z-index: 11111;
		top: 85upx;
		left: 30upx;
		display: flex;
		color: #000;
		line-height: 30upx;
		align-items: center;
		display: inline-block;
	}
	
	.backs image {
		width:45upx;
		height:45upx;
		margin-right: 14upx;
	}
	
	.review {
		width:94%;
		height: 80rpx;
		padding: 0 3%;
		margin:0 auto;
		color:#888;
		font-size: 14px;
	}
	.reviewImg {
		width:94%;
		height: 120rpx;
		padding: 10px 3%;
		margin:0 auto;
		border-bottom: solid 1px #e6e7e8;
		color:#333;
		font-size: 14px;
	}
	.titleNview-background {
		width: 100%;
		height: 418upx;
		-webkit-transition: .4s;
		transition: .4s;
		background-size: 100% 100%;
		position: relative;
	}

	.wrapper {
		position: relative;
		width: 91%;
		margin: 0 auto;
		z-index: 2;
		border-top-left-radius:27upx;
		border-top-right-radius:27upx;
		background-color: #fff;
	}

	/*配送车牌号*/
	.text-box {
		position: absolute;
		color: #fff;
		bottom: 150upx;
		left: 5%;
		width: 91%;
		z-index: 2;
		font-size: 32upx;
	}

	/* 待配送 已配送商户 */
	.model {
		width:79%;
		margin: 0 auto;
		margin-top: -129upx;
		padding: 35upx 6%;
		border-radius: 27upx;
		background-color: #fff;
		z-index: 2;
		box-shadow: 0 5px 5px rgba(227, 227, 227, .5);
		position: relative;
	}
	.dataRap {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.onlyOne {
		display: flex;
		align-items: center;
		width: 33.3%;
	}
	
	.modeline {
		width: 1px;
		height: 70upx;
		background-color: #eeeeee;
	}
	
	.modelrt {
		flex: 1;
		display: flex;
		flex-direction: column;
		color: #888888;
		white-space: nowrap;
		font-size: 21.84upx;
		text-align: center;
	}
	
	.psnums {
		color: #000;
		font-size: 28.08upx;
		margin-top: 5upx;
	}
	
	.psnum {
		color: #f69c3c;
		font-size:38upx;
		font-weight: bold;
		margin-right: 10upx;
	}
	.pesBtn {
		border-radius: 200upx;
		background-color: #ffc562;
		font-size:28upx;
		color: #fff;
	}

	/* 表格 */
	.tableBox {
		width: 100%;
		padding-bottom: 40upx;
		margin-top: 44upx;
	}

	.tabletitle {
		border-top-left-radius: 27upx;
		border-top-right-radius: 27upx;
		background-color: #007457;
		height: 98upx;
		width: 100%;
		text-align: center;
		line-height: 98upx;
		color: #fff;
		font-size: 32upx;
	}

	.table {
		width: 96%;
		margin: 0 auto;
		/* 下方的灰色分割线 */
		border-bottom: solid 14upx #eee;
		padding-bottom: 40upx;
		margin-bottom: 40upx;
	}
    /*包裹ID及包裹编号*/
	.bgName {
		padding:20upx 0; 
		line-height: 40upx;
		display: flex; 
		justify-content: space-between;
		word-wrap: break-word;
		white-space: normal;
		word-break: break-all;
		border-bottom: solid 1px #eee;
	}
	
	/* 是否确认取消弹窗 */
	.popup-info {
		position: fixed;
		min-width:80%;
		max-width:80%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 30upx;
		border-radius:27upx;
		background-color: #fff;
		z-index: 9999;
	}
     .popuptitle {
		border-top-left-radius: 27upx;
		border-top-right-radius:27upx;
		background-color: #007457;
		height: 98upx;
		width: 100%;
		text-align: center;
		line-height: 98upx;
		color: #fff;
		font-size:36upx;
		letter-spacing: 2px;
	}
	.form {
		width:90%;
		position: relative;
		margin:40upx auto;
		display: block;
	}
	.rateBox {
		display: flex; 
		flex-direction: row; 
		height:120upx; 
		align-content: center;    
		align-items: center;
	}
	.close {
		position: absolute;
		top:-75upx;
		left:10upx;
	}
	.close image {
		width:37upx;
		height:37upx;
	}
	.imgWra {
		width: 80%; 
		margin:60upx auto;
	}

	.up-check {
		width:100%;
		height: 500upx;
	}
	/* 弹窗按钮 */
	.btnPat {
		width: 100%;
		display: flex;
		flex:1;
		flex-direction:row;
	}
	.btn {
		width: 90%;
		background-color: #ffc562;
		border-radius: 200upx;
		margin:40upx auto;
		box-shadow: 0 2px 5px #e3e3e3;
		color: #fff;
	}
	.pesBtn::after,.btn::after{
		border: none;
	}
	
</style>
